<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${_ctx}" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台轮播设置</title>
		<script src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//复选框
				$(".content-form-checkbox").click(function(){
					$(this).toggleClass("content-form-checked")
					$(this).toggleClass("content-form-checkbox-img")
					var isshow=-1;
					var $lbid=$(this).parents(".imgbox").attr("lbid");
					if($(this).find("span").text()=="关闭"){
						$(this).find("span").text("开启")
						isshow=0;
					}else{
						$(this).find("span").text("关闭")
						ishow=1;
					}
					$.ajax({
						type:"post",
						url:"htmain?v=updatelunbo&lbid="+$lbid+"&isshow="+isshow,
						success:function(msg){
							
						}
					})
				})
				//单选框
				$(".content-form-radio").click(function(){
					$(this).toggleClass("content-form-radio-notimg");
					$(this).toggleClass("content-form-radio-img");
					$(this).siblings().removeClass("content-form-radio-img");
					$(this).siblings().addClass("content-form-radio-notimg");
					
					$(".content-form-radio input").removeProp('checked');
					$(".content-form-radio-img input").prop('checked', 'checked');
					
				})
				//图片回显
				$(".imgcontent .imgbox .img input,#lunboimg").bind("change",function(){
					var read=new FileReader()
					var $input=$(this);
					read.readAsDataURL(this.files[0]);
					read.onload=function(){
					url=read.result // 拿到读取结果;
					 //DOM元素，不能是JQ对象
					$input.siblings().attr("src",url);
					}
				})
				$(".gbimg").click(function(){
					$(".adddzpager").hide();
				})
				//新增按钮
				$(".addlunbo-box").on("click","#addlunbo-img",function(){
					$(".adddzpager").show();
				})
				//删除ajax事件
				$(".del").click(function(){
					var $lbid= $(this).attr("lbid");
					$.ajax({
						type:"post",
						url:"htmain?v=deletelunbo&lbid="+$lbid,
						success:function(msg){
							
						}
					})
					$(this).parents(".imgbox").remove();
				})
				
				
			})
		</script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				background-color: rgb(240, 243, 244);
			}
			ul{
				list-style: none;
			}
			.content{
				width: 79%;
				margin-top: 25px;
				margin-left: 2%;
				background: #fff;
			}
			.content:after{
				content: ".";
				display: block;
				visibility: hidden;
				height: 0px;
				clear: both;
			}
			.lunbo{
				padding: 15px 15px;
				width: 97%;
				border: 0px solid red;
			}
			.lunbo:after{
				content: ".";
				display: block;
				visibility: hidden;
				height: 0px;
				clear: both;
			}
			.imgcontent{
				padding: 15px 15px;
				width: 97%;
				border: 0px solid red;
			}
			.imgcontent:after{
				content: ".";
				display: block;
				visibility: hidden;
				height: 0px;
				clear: both;
			}
			.nav-tabs{
				border-bottom-color: #f4f4f4;
				border-bottom: 1px solid #ddd;
			}
			.nav-tabs:after{
				content: ".";
				display: block;
				visibility: hidden;
				height: 0px;
				clear: both;
			}
			.nav-tabs .active{
				border-bottom: 2px solid #5FB878;
			}
			.nav-tabs li{
				float: left;
				margin-bottom: -1px;
				margin-right: 5px;
			}
			.nav-tabs li a{
				display: block;
				padding: 10px 15px;
				border: 1px solid transparent;
				color: #333;
				font-size: 14px;

			}
			.imgcontent .imgbox{
				width: 300px;
				height: 200px;
				float: left;
				margin-left: 45px;
				margin-right: -13px;
				margin-bottom: 15px;
				position: relative;
			}
			.imgcontent .imgbox .del{
				position: absolute;
				z-index: 999;
				top: 0px;
				right: 0px;
				width: 24px;
				height: 24px;
				padding: 3px;
			}
			.imgcontent .imgbox .img{
				border: 0px solid #ccc;
				margin-bottom: 3px;
			}
			.imgcontent .imgbox .img img{
				width: 298px;
				height: 150px;
			}
			.imgcontent .imgbox .img input{
				position: absolute;
				width: 300px;
				height: 150px;
				top: 0px;
				left: 0px;
				z-index: 888;
				opacity: 0;
			}
			.imgcontent .imgbox select{
				width: 70%;
				height: 30px;
				border: 1px solid;
				border-color: rgb(85, 85, 85);
				float: left;
				margin-right: 10px;
			}
			.content-form-checkbox{
				position: relative;
				height: 30px;
				line-height: 30px;
				padding-right: 30px;
				cursor: pointer;
				box-sizing: border-box;
				float: right;
				margin-right:2px;
			}
			.content-form-checkbox span{
				padding: 0 10px;
				height: 100%;
				font-size: 14px;
				border-radius: 2px;
				background-color: #d2d2d2;
				color: #fff;
				overflow: hidden;
				display: inline-block;
			}
			.content-form-checked span{
				background-color: #5FB878;
			}
			.content-form-checkbox i{
				position: absolute;
				right: 0;
				top: 0;
				width: 30px;
				height: 28px;
				border: 1px solid #d2d2d2;
				border-left: none;
				border-radius: 0 2px 2px 0;
				color: #fff;
				text-align: center;
				background-size: 19px 19px;
				background-position: 6px 4px;
				background-repeat:no-repeat;
				
			}
			.content-form-checkbox-img i{
				background-image: url(imgs/htimgs/selectbtnlugou.png) ;
			}
			.content-form-radio{
				line-height: 28px;
				margin: 6px 10px 0 0;
				padding-right: 10px;
				cursor: pointer;
				display: inline-block;
				vertical-align: middle;
				float: left;
				
			}
			.content-form-radio i{
				margin-right: 8px;
				display: inline-block;
				width: 22px;
				height: 28px;
				
			}
			.content-form-radio-notimg i{
				background-size: 19px 19px;
				background-position: 2px 4px;
				background-repeat:no-repeat;
				background-image: url(imgs/htimgs/radionot.png) ;
			}
			.content-form-radio-img i{
				background-size: 19px 19px;
				background-position: 2px 4px;
				background-repeat:no-repeat;
				background-image: url(imgs/htimgs/radio.png) ;
			}
			.content-form-radio div{
				display: inline-block;
				vertical-align: top;
				font-size: 12px;
			}
			.layui-btn{
				margin-left: 10px;
				margin-bottom: 10px;
				display: inline-block;
				height: 38px;
				line-height: 38px;
				padding: 0 18px;
				background-color: #009688;
				color: #fff;
				white-space: nowrap;
				text-align: center;
				font-size: 14px;
				border: none;
				border-radius: 2px;
				cursor: pointer;
			}
			/*新增地址弹出层*/
			.adddzpager{
				display: none;
				width: 100%;
				height: 104%;
				position: fixed;
				top: -20px;
				z-index: 99999;
				background-color: rgba(0,0,0,0.3);
			}
			.adddz{
				width: 63%;
				height: 500px;
				margin:80px 124px;
				background-color: #fff;
			}
			.adddz .guanbi{
				margin-bottom: 10px;
			}
			.adddz .guanbi:after{
				content: ".";
				display: block;
				visibility: hidden;
				height: 0px;
				clear: both;
			}
			.adddz .guanbi .gbtitle{
				float: left;
				padding: 10px 15px;
			}
			.adddz .guanbi .gbtitle h3{
				font-weight: 550;
			}
			.adddz .guanbi .gbtitle small{
				font-size: 12px;
			}
			.adddz .guanbi .gbimg{
				float: right;
				padding: 10px 15px;
			}
			.adddz .guanbi .gbimg img{
				width: 24px;
				height: 24px;
			}
			.text-danger{
				color: red;
			}
			.form-group{
				margin-bottom: 15px;
			}
			.form-group:after{
				content: ".";
				display: block;
				visibility: hidden;
				height: 0px;
				clear: both;
			}
			.juzhong{
				width: 80%;
				margin: 0 auto;
			}
			.control-label{
				padding-top: 7px;
				text-align: right;
				padding-right: 15px;
			}
			.form-control{
				width: 100%;
				height: 20px;
				padding: 6px 12px;
				border: 1px solid #ccc;
				border-radius: 2px;
			}
			.dzliandong{
				width: 150%;
			}
			.dzliandong select{
				padding: 7px 1px;
			}
			.checkbox{
				padding: 7px;
			}
			.col-xs-5{
				margin-left: 76%;
			}
			.dzbtnbc{
				padding: 4px 40px;
				font-size: 15px;
				border-radius: 3px;
				color: #fff;
				background-color: #2f973f;
				border-color: #2f973f;
				border: 1px solid transparent;
			}
			.chongfuselect{
				position: fixed;
				top: 211px;
				left: 480px;
				background-color: rgba(0,0,0,0.5);
				color: #fff;
				width: 160px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				border-radius: 5px;
				font-size: 14px;
				z-index: 9999;
				display: none;
			}
			.col-xs-7{
				margin-left: 30px;
				position: relative;
			}
			.sp{
				padding: 4px 15px;
				min-width: 180px;
				text-align: center;
				display: inline-block;
				float: left;
				font-size:14px;
				border:1px solid #888;
			}
			.col-xs-7 input[type=file]{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 128px;
				height: 128px;
				opacity: 0;
			}
			.col-xs-7 img{
				width: 128px;
				height: 128px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<ul class="nav-tabs">
				<li class="active">
					<a>幻灯片广告设置</a>
				</li>
			</ul>
			<div class="imgcontent">
				<div class="addlunbo-box">
					<button type="button" class="layui-btn" id="addlunbo-img">新增轮播图</button>
				</div>
				<c:forEach var="c" items="${lblist}">
				<div class="imgbox" lbid="${c.lbid}">
					<div class="img">
						<img src="${c.lbimg}" />
						<input type="file"  />
					</div>
					<img class="del" lbid="${c.lbid}" src="imgs/htimgs/lunbodel.png" />
					<span class="sp">${c.cname}</span>
					<div class="content-unselect content-form-checkbox ${c.isshow==0?'content-form-checked content-form-checkbox-img':''} ">
						<span>${c.isshow==0?'开启':'关闭'}</span>
						<i class="content-icon layui-icon-ok">
							
						</i>
					</div>
				</div>
				</c:forEach>
			</div>
		</div>
		<div class="adddzpager">
			<div class="adddz">
				<div class="guanbi">
					<div class="gbtitle">
						<h3>新增轮播图
							<small>My Imgs</small>
						</h3>
					</div>
					<div class="gbimg">
						<img src="imgs/liuimgs/dzgb.png" />
					</div>
				</div>
				<div class="juzhong">
					<form action="htmain?v=addlunboimg" method="post" enctype="multipart/form-data">
						<div class="form-group">
							<label class="col-xs-2 control-label">轮播图片
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<img src="imgs/htimgs/addspimg.png" class="addimgsrc" />
								<input type="file" id="lunboimg" name="lunboimg" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">是否显示
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<div class="content-form-radio content-form-radio-img">
								<input type="radio" checked="checked" name=sex value="0" style="display: none" >
									<i></i>
									<div>开启</div>
								</div>
								<div class="content-form-radio content-form-radio-notimg">
								<input type="radio" name=sex value="1" style="display: none" >
									<i></i>
									<div>关闭</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">绑定商品
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<select name="cid">
									<c:forEach var="m" items="${commlist}">
										<option value="${m.cid}">${m.cname}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="col-xs-5 ">
							<div class="checkbox">
								<button type="submit" class="dzbtnbc">新增</button>
							</div>
						</div>
					</form>
					
				</div>
			</div>
		</div>
	</body>
</html>